<template>
  <div class="m-classify">
    <!-- 顶部导航 -->
    <yd-navbar slot="navbar" title="分类" height=".88rem" bgcolor="#fff" color="#444" fontsize=".3rem" :fixed="true"></yd-navbar>

    <w-empty v-if="!classifyMenu.length"></w-empty>
    <!-- 内容区域 -->
    <yd-scrolltab v-else>
      <yd-scrolltab-panel v-for="(menu, menuIndex) in classifyMenu" :key="menuIndex" :label="menu.className">
        <div class="m-classify-section">
          <section class="bd">
            <router-link :to="`/classify/detail/${classes.id}/${classes.className}`" class="item" v-for="(classes, classesIndex) in menu.childs" :key="classesIndex">
              <div class="img-box">
                <img class="minimg" v-lazy="classes.icon_acc && classes.icon_acc.path + '/' + classes.icon_acc.name">
              </div>
              <p class="text">{{classes.className}}</p>
            </router-link>
          </section>
        </div>
      </yd-scrolltab-panel>
    </yd-scrolltab>
  </div>
</template>

<script>
  import { apiClassMenu, apiClassContent } from 'js/api'

  export default {
    data() {
      return {
        classifyMenu: []
      }
    },
    methods: {
      getClassfiy() {
        apiClassMenu().then(data => {
          this.getClassifyContent('pu', data.goodsClass[0].id)
        })
      },
      getClassifyContent(type, parentId) {
        apiClassContent(type, parentId).then(data => {
          this.classifyMenu = data.goodsClass
        })
      }
    },
    created() {
      this.getClassfiy()
    }
  }
</script>

<style lang="scss">
  @import '../../scss/_mixin.scss';
  .m-classify {
    .yd-scrolltab {
      top: 0.9rem;
    }
  }
  .m-classify-section {
    h2 {
      height: 1rem;
      line-height: 1rem;
      font-weight: 400;
      color: #333;
    }
    .bd {
      padding-bottom: .2rem;
      border-bottom: 1px solid #f4f4f4;
      font-size: 0;
      .item {
        display: inline-block;
        width: 29%;
        margin-right: .2rem;
        margin-bottom: .2rem;
        font-size: .2rem;
        text-align: center;
        overflow: hidden;
      }
      .img-box {
        height: 1.44rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        @include cutoff;
        color: #666;
        line-height: .44rem;
      }
    }
  }
</style>